<template>
    <div class="note-container">
        <div class="filter-container">
            <el-input v-model="listQuery.title" placeholder="小记标题" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-select v-model="listQuery.status" placeholder="状态" clearable class="filter-item" style="width: 130px">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="ID" width="95">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <el-table-column label="小记图片" width="200">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.images[0]" fit="cover"
                        :preview-src-list="scope.row.images" />
                </template>
            </el-table-column>
            <el-table-column label="小记标题" align="center">
                <template slot-scope="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column label="小记内容" align="center">
                <template slot-scope="scope">
                    <el-popover placement="top-start" width="400" trigger="hover">
                        <div>{{ scope.row.content }}</div>
                        <div slot="reference" class="content-preview">
                            {{ scope.row.content | ellipsis }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="发布时间" align="center" width="180">
                <template slot-scope="scope">
                    {{ scope.row.createTime | parseTime }}
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                        {{ scope.row.status === 1 ? '已审核' : '待审核' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <el-button v-if="row.status === 0" type="success" size="mini" @click="handleAudit(row)">
                        审核
                    </el-button>
                    <el-button v-if="row.status === 0" type="danger" size="mini" @click="handleReject(row)">
                        驳回
                    </el-button>
                    <el-button v-else type="warning" size="mini" @click="handleOffline(row)">
                        下架
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'

export default {
    name: 'Note',
    components: { Pagination },
    filters: {
        parseTime,
        ellipsis(value) {
            if (!value) return ''
            if (value.length > 50) {
                return value.slice(0, 50) + '...'
            }
            return value
        }
    },
    data() {
        return {
            list: [],
            listLoading: true,
            total: 0,
            listQuery: {
                page: 1,
                limit: 10,
                title: '',
                status: ''
            },
            statusOptions: [
                { value: 1, label: '已审核' },
                { value: 0, label: '待审核' }
            ]
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.listLoading = true
            // TODO: 调用后端API获取小记列表
            // const { data, total } = await getNoteList(this.listQuery)
            // this.list = data
            // this.total = total
            this.list = [
                {
                    id: 1,
                    title: '测试小记1',
                    content: '这是一条测试小记的内容，用于展示小记管理功能。',
                    images: ['https://example.com/image1.jpg'],
                    createTime: '2024-03-20 10:00:00',
                    status: 0
                }
            ]
            this.total = 1
            this.listLoading = false
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        async handleAudit(row) {
            this.$confirm('确认审核通过该小记吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // TODO: 调用后端API审核小记
                // await auditNote(row.id)
                this.$notify({
                    title: '成功',
                    message: '审核成功',
                    type: 'success',
                    duration: 2000
                })
                this.getList()
            })
        },
        async handleOffline(row) {
            this.$confirm('确认下架该小记吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // TODO: 调用后端API下架小记
                // await offlineNote(row.id)
                this.$notify({
                    title: '成功',
                    message: '下架成功',
                    type: 'success',
                    duration: 2000
                })
                this.getList()
            })
        },
        async handleDelete(row) {
            this.$confirm('确认删除该小记吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // TODO: 调用后端API删除小记
                // await deleteNote(row.id)
                this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })
                this.getList()
            })
        },
        async handleReject(row) {
            this.$confirm('确认驳回该小记吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // TODO: 调用后端API驳回小记
                // await rejectNote(row.id)
                this.$notify({
                    title: '成功',
                    message: '驳回成功',
                    type: 'success',
                    duration: 2000
                })
                this.getList()
            })
        }
    }
}
</script>

<style scoped>
.note-container {
    padding: 20px;
}

.filter-container {
    padding-bottom: 10px;
}

.content-preview {
    cursor: pointer;
    color: #409EFF;
}
</style> 